"use client";

import CommentaryItem from "@/app/[language]/commentary/components/CommentaryItem";
import useGetCommentary from "@/app/[language]/commentary/query/useGetCommentary";
import usePostCommentary from "@/app/[language]/commentary/query/usePostCommentary";
import { useTranslations } from "next-intl";
import { useState } from "react";
import ReactTextareaAutosize from "react-textarea-autosize";
import { toast } from "react-toastify";
import { Button, Col, Form, Input, ListGroup, Row } from "reactstrap";

export default function Page() {
  const t = useTranslations();

  const [avatarName, setAvatarName] = useState("");
  const [avatarCipher, setAvatarCipher] = useState("");
  const [textInput, setTextInput] = useState("");

  const { data: commentary, isFetched: isCommentaryLoaded } =
    useGetCommentary();
  const { mutateAsync: postCommentary } = usePostCommentary();

  return (
    <>
      <Form>
        <Row className="g-0">
          <Col className="m-1">
            <Input
              placeholder={t("avatarName")}
              valid={!!avatarName}
              invalid={!avatarName}
              onChange={({ target: { value } }) => {
                setAvatarName(value);
              }}
            />
          </Col>
          <Col className="m-1">
            <Input
              autoComplete="off"
              valid={!!avatarCipher}
              invalid={!avatarCipher}
              type="password"
              placeholder={t("avatarCipher")}
              onChange={({ target: { value } }) => {
                setAvatarCipher(value);
              }}
            />
          </Col>
        </Row>
        <Row className="g-0">
          <Col className="m-1">
            <ReactTextareaAutosize
              className="form-control"
              value={textInput}
              placeholder={t("text")}
              onChange={({ target: { value } }) => {
                setTextInput(value);
              }}
            />
          </Col>
          <Col className="m-1" xs="auto">
            <Button
              color="success"
              onClick={async () => {
                if (avatarName && avatarCipher && textInput) {
                  await postCommentary({
                    avatarName,
                    avatarCipher,
                    text: textInput,
                  });
                } else {
                  toast.error(t("failedValidation"));
                }
              }}
            >
              {t("postCommentary")}
            </Button>
          </Col>
        </Row>
      </Form>
      {isCommentaryLoaded && (
        <Row className="g-0">
          <Col className="m-1">
            <ListGroup>
              {commentary.map((commentary) => (
                <CommentaryItem
                  key={commentary.commentaryID}
                  commentary={commentary}
                />
              ))}
            </ListGroup>
          </Col>
        </Row>
      )}
    </>
  );
}